<template>
  <h3>添加商品</h3>
  <div class="one-page">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input
          v-model="ruleForm.name"
          type="text"
          autocomplete="off"
          placeholder="请填写商品名称"
        />
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input
          v-model.number="ruleForm.price"
          autocomplete="off"
          placeholder="请填写商品价格"
        />
      </el-form-item>
      <el-form-item label="商品折扣价" prop="discount">
        <el-input
          v-model.number="ruleForm.discount"
          placeholder="请填写商品折扣价"
        />
      </el-form-item>
      <el-form-item label="商品图片名称" prop="imgageName">
        <el-input
          v-model="ruleForm.imgageName"
          placeholder="请填写商品图片名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >添加</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import api from "../../API/index";

const ruleFormRef = ref<FormInstance>();
//折扣价验证
const validateDiscount = (rule: any, value: any, callback: any) => {
  if (!Number.isInteger(value) && value) {
    callback(new Error("请填写正确的价格"));
  }

  callback();
};
//图片信息验证
const validateImgages = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("请填写图片商标信息"));
  } else {
    callback();
  }
};
//商品名称验证
const validateName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请填写商品名称"));
  } else if (value.length > 10) {
    callback(new Error("商品名称长度不能超过10位"));
  } else {
    callback();
  }
};
//商品价格验证
const validatePricr = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请填写商品价格"));
  } else if (typeof +value !== "number") {
    callback(new Error("请填写正确的价格"));
  } else if (value < 500) {
    callback(new Error("商品价格不能小于500"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  name: "", //商品名称
  price: "", //商品价格
  discount: "", //折扣价
  imgageName: "", //图片名
  off: false, //商品默认为上架
});
//表单验证规则
const rules = reactive<FormRules>({
  name: [{ validator: validateName, required: true, trigger: "blur" }],
  price: [{ validator: validatePricr, required: true, trigger: "blur" }],
  discount: [{ validator: validateDiscount, trigger: "blur" }],
  imgageName: [{ validator: validateImgages, required: true, trigger: "blur" }],
});

//添加商品请求
const postMallData = async (from: object) => {
  return await api.addMallData(from);
};

//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      console.log("submit!");
      try {
        await postMallData(ruleForm);
        ElMessage.success("添加成功");
        resetForm(ruleFormRef.value);
      } catch (error) {
        ElMessage.error("添加失败");
      }
    } else {
      ElMessage.error("请输入完整商品信息");
      return false;
    }
  });
};
//清空
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped>
h3 {
  margin: 20px;
}
.one-page {
  width: 50vw;
  margin: 0 auto;
}

.el-form-item {
  margin-bottom: 50px;
}
</style>
